<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" http-equiv="content-type" content="text/html"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>注册登录页面</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="./index.css">
    
    </head>
    <body>
      
           <div class="container">
                <div class="form_box">
                    <div class="register_box hidden" >
                         <h1>register</h1>  
                        <input type="text" name="" id=""placeholder="用户名">
                        <input type="email" name="" id="" placeholder="邮箱">
                        <input type="password" name="" id=""placeholder="密码">
                        <input type="password" name="" id="" placeholder="确认密码">
                        <button>注册</button>
                    </div>
                        <div class="login_box ">
                            <h1>login</h1>
                            <input type="text" name="" id=""placeholder="用户名">
                            <input type="password" name="" id="" placeholder="密码">  
                            <button>登录</button>
                        </div>                   
                </div>
                <div class="con_box left">
                    <h2>欢迎来到<span>宠物之家</span></h2>
                    <p>快来领取你的专属<span>宠物</span>吧</p>
                    <img src="./cat1.jpeg" alt="" >
                    <p>已有账号</p>
                    <button id="login">去登录</button>
                </div>
                <div class="con_box right">
                    <h2>欢迎来到<span>宠物之家</span></h2>
                    <p>快来看看你的专属<span>宠物</span>吧</p>
                    <img src="./dog1.jpeg" alt="">
                    <p>没有账号？</p>
                    <button id="register">去注册</button>
                </div>
           </div>
       <script>
        //    要操作的元素
           let login=document.getElementById('login')
           let register=document.getElementById('register')
           let form_box=document.getElementsByClassName('form_box')[0];
           let register_box=document.getElementsByClassName('register_box')[0];
           let login_box=document.getElementsByClassName('login_box')[0];
            // 去注册按钮点击时间
           register.addEventListener('click',()=>{
               form_box.style.transform='translateX(80%)';//x方向平移
               login_box.classList.add('hidden')
               register_box.classList.remove('hidden')
            

           })
        //    去登录按钮点击事假
           login.addEventListener('click',()=>{
               form_box.style.transform='translateX(0%)';
               login_box.classList.remove('hidden')
               register_box.classList.add('hidden')
           })
       </script>

      
    

    </body>
</html>